<link rel="stylesheet" href="<?php echo base_url() ?>js/toastmessage/resources/css/jquery.toastmessage.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="<?php echo base_url() ?>js/toastmessage/javascript/jquery.toastmessage.js" type="text/javascript" charset="utf-8"> </script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		
		<?php
		if(validation_errors()):
		?>
			var username = "<?php echo form_error('username') ?>";
			var password = "<?php echo form_error('password') ?>";
			var cpassword = "<?php echo form_error('cpassword') ?>";
			var email = "<?php echo form_error('email') ?>";
			var cemail = "<?php echo form_error('cemail') ?>";
			var tc = "<?php echo form_error('agree') ?>";
			var recaptcha_response_field = "<?php echo form_error('recaptcha_response_field') ?>";
			$().toastmessage('showToast', {
				text     : '<br/>'+username+password+cpassword+email+cemail+recaptcha_response_field+tc,
				sticky   : true,
				position:  'middle-center',
				type     : 'error'
			});
		<?php
		elseif($this->session->flashdata('msg_reg')):
		?>
			$().toastmessage('showToast', {
				text     : "<?php echo $this->session->flashdata('msg_reg') ?>&nbsp;<a style=\"color:#00aeff;text-decoration:none\" href=\"login\">Login</a>",
				sticky   : true,
				position:  'middle-center',
				type     : 'success'
			});
		<?php
		endif;
		?>
		
	});
</script>
<style type="text/css" media="screen">
	.error{
		font-size:10px;
		color:#fff;
		margin-bottom:5px;
	}
	.toast-container {
		width:350px;
	}
</style>
<div style="width:910px;height:927px" id="login">
	<div style="position:absolute;padding:10px;width:900px;text-align:center;color:#00aeff">
	</div>
	<div style="padding:54px 56px">
		<h1 class="calibri" style="font-size:30px;text-align:center">Account Registration</h1>
		<div class="clear-40"></div>
			<?php echo form_open() ?>
			<p>
				<label style="font-size:20px" class="calibri"><label class="ask">*</label>Username</label>
				<input type="text" name="username" id="username" value="<?php echo set_value('username'); ?>"><label class="form-note calibri">Username must be between 3 and 16 characters, and must contain only numbers, letters, - and _. It cannot be changed once created.</label>
			</p>
			<div class="clear-30"></div>
			<p>
				<label style="font-size:20px" class="calibri"><label class="ask">*</label>Password</label>
				<input type="password" name="password" id="password" value="<?php echo set_value('password'); ?>"><label class="form-note calibri">Your account password must be between 6 and 16 characters.</label>
			</p>
			<div class="clear-30"></div>
			<p>
				<label style="font-size:20px" class="calibri"><label class="ask">*</label>Confirm Password</label>
				<input type="password" name="cpassword" id="cpassword" value="<?php echo set_value('cpassword'); ?>">
			</p>
			<div class="clear-30"></div>
			<p>
				<label style="font-size:20px" class="calibri"><label class="ask">*</label>E-Mail</label>
				<input type="text" name="email" id="email" value="<?php echo set_value('email'); ?>"><label class="form-note calibri">You must enter a valid e-mail address for use when you forget your password or if we need to contact you about your account.</label>
			</p>
			<div class="clear-30"></div>
			<p>
				<label style="font-size:20px" class="calibri"><label class="ask">*</label>Confirm E-mail</label>
				<input type="text" name="cemail" id="cemail" value="<?php echo set_value('cemail'); ?>">
			</p>
			<div class="clear-30"></div>
			<p>
				<label style="font-size:20px" class="calibri"><label class="ask">*</label>Security Check:</label>
				<?php echo recaptcha_get_html($publickey, $error);
				?>
			</p>
			
			<div style="margin-top:25px;text-align:center">
				<input style="margin-left:10px" type="checkbox" id="agree" name="agree" /><label for="rem" style="display:inline;margin-left:10px" class="calibri">I agree to and accept the Terms of Use Policy</label>
				<div class="clear"></div>
				
				<input type="submit" name="" value="Create an Account" class="css3button">
				
			</div>
		</form>
	</div>
</div>